<template>
  <div class="main">
    <p class="main_text">公司管理</p>
    <!-- #####################################头部##################################### -->
    <div class="main_nav p20 mb20">
      <el-form :model="searchData" class="df">
        <el-form-item label="公司名称：" class="mr20" style="width: 20%;">
          <el-input v-model="searchData.companyName" placeholder="公司名称" />
        </el-form-item>
        <!-- <el-form-item label="公司状态：" class="mr20" style="width: 20%;">
                    <el-select v-model="searchData.status" placeholder="公司状态">
                        <el-option label="正常" value="1" />
                        <el-option label="注销" value="2" />
                        <el-option label="黑名单" value="3" />
                        <el-option label="未激活" value="4" />
                    </el-select>
                </el-form-item> -->
        <el-form-item label="审核状态：" class="mr20" style="width: 20%;">
          <el-select v-model="searchData.auditStatus" placeholder="审核状态">
            <el-option label="待审核" value="0" />
            <el-option label="未通过" value="1" />
            <el-option label="已通过" value="2" />
            <el-option label="待上传合同" value="3" />
            <el-option label="待提交" value="-1" />
          </el-select>
        </el-form-item>
        <el-form-item style="width: 20%">
          <div class="df">
            <el-button type="primary" @click="searchDataBtn">查询</el-button>
            <el-button type="primary" plain @click="resc">重置</el-button>
          </div>
        </el-form-item>
      </el-form>
    </div>
    <!-- #####################################底部##################################### -->
    <div class="cyr-flex">
      <div class="mb20">
        <el-button type="primary" @click="addCompany" v-if="company == 0 && roleList.write">添加公司</el-button>
        <el-button type="danger" plain v-if="company == 0 && roleList.write">批量删除</el-button>
      </div>
      <div class="cyr-flex-box">
        <el-table @selection-change="handleSelectionChange" :data="tableData"
          :header-cell-style="{ background: '#f0f6fe' }" :show-overflow-tooltip="true" border v-adaptive>
          <el-table-column type="selection" width="35" />
          <el-table-column label="公司编号" width="90" prop="idStr" />
          <el-table-column label="公司名称" prop="companyName" />
          <el-table-column label="公司性质">
            <template #default="props">
              <el-text v-if="props.row.type == 1">拖车公司</el-text>
              <el-text v-else-if="props.row.type == 0">拆解厂（全部）</el-text>
              <el-text v-else-if="props.row.type == 2">拆解厂（仅商城）</el-text>
            </template>
          </el-table-column>
          <!-- <el-table-column label="试用等级">
          <template #default="props">
            <el-button v-if="props.row.levelName == '已签署合同'" link type="success">{{ props.row.levelName }}</el-button>
            <el-popover v-else placement="bottom" width="230" trigger="hover" @show="showPopover(props.row.levelName)">
              <template #reference>
                <el-button link type="info">{{
        props.row.levelName
      }}</el-button>
              </template>
              <div class="df jcsb">
                <div>{{ props.row.levelName }}</div>
                <el-button link size="small" type="success" @click="trialHistoryBtn(props.row)">历史记录</el-button>
              </div>
              <div v-if="showPopoverFlag == true">
                <div style="color: #b2b2b2" class="mt10">
                  试用期限: {{ showPopoverData.trialDuration }}天
                </div>
                <div style="color: #b2b2b2" class="mt10">
                  配件&emsp;累计上架数<span style="color: #67c23a">{{ showPopoverData.fittingNumOnSale }}</span>/{{
        showPopoverData.fittingNumber
      }}件
                </div>
                <div style="color: #b2b2b2" class="mt10">
                  整车&emsp;累计上架数<span style="color: #67c23a">{{ showPopoverData.wholeCarNumOnSale }}</span>/{{
        showPopoverData.carNumber
      }}件
                </div>
              </div>
            </el-popover>
          </template>
        </el-table-column> -->
          <el-table-column label="公司地址" prop="address" />
          <el-table-column label="法人姓名" prop="legalPersonName" />
          <el-table-column label="更新时间" prop="updatedAt" />
          <el-table-column label="状态">
            <template #default="props">
              <!-- 1=>正常 2=>注销 3=>黑名单 4=>未激活 -->
              <el-button v-if="props.row.status == 0" size="small" link type="info">未提交</el-button>
              <el-button v-else-if="props.row.status == 1" size="small" link type="success">正常</el-button>
              <el-button v-else-if="props.row.status == 2" size="small" link type="danger">停用</el-button>
              <el-button v-else-if="props.row.status == 3" size="small" link type="warning">黑名单</el-button>
              <el-button v-else size="small" link>未激活</el-button>
            </template>
          </el-table-column>
          <el-table-column label="审核状态">
            <template #default="props">
              <!-- 0、审核中1、未通过2、已通过-->
              <el-button v-if="props.row.auditStatus == 0" size="small" link type="success">审核中</el-button>
              <el-button v-else-if="props.row.auditStatus == 1" size="small" link type="danger">未通过</el-button>
              <el-button v-else-if="props.row.auditStatus == 2" size="small" link type="success">已通过</el-button>
              <el-button v-else-if="props.row.auditStatus == 3" size="small" link type="warning">待上传合同</el-button>
              <el-button v-else-if="props.row.auditStatus == null" size="small" link type="primary">待提交</el-button>
              <!-- <el-button v-else size="small" link type="success">审核中</el-button> -->
            </template>
          </el-table-column>
          <el-table-column label="操作" fixed="right" width="220">
            <template #default="props">
              <div class="df aic">
                <el-button size="small" link type="primary" @click="check(props.row)"
                  v-if="roleList.read">查看</el-button>
                <el-button @click="auditRecord(props.row)" size="small" link type="primary"
                  v-if='roleList.read'>审核记录</el-button>
                <el-button v-if="props.row.auditStatus == null || props.row.auditStatus == 1 && roleList.write
                " size="small" link type="primary" @click="SubmitReview(props.row)">提交审核</el-button>
                <div v-if="props.row.contractFlag != true" class="df aic ml10">
                  <el-button v-if="props.row.auditStatus == 3" size="small" link type="primary"
                    @click="uploadContract(props.row)">上传合同</el-button>
                </div>
                <div v-if="props.row.auditStatus == 2 || props.row.auditStatus == 3" class="df aic ml10">
                  <el-button size="small" v-if="props.row.status != 1 && roleList.write" link type="primary"
                    @click="activate(props.row)">激活</el-button>
                </div>
              </div>
              <!-- <el-button size="small" link type="danger" @click="del(props.row.id)">删除</el-button> -->
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页器 -->
        <smartPager v-model:current-page="currentPage" v-model:page-size="pageSize" :total="total"
          @change="handleCurrentChange" />
      </div>
      <!-- ################################################ 蒙层查看公司 ################################################-->
      <el-dialog v-model="centerDialogVisible" align-center @close="closeDiag" width="750px">
        <template #header>
          <div class="df aic">
            <el-icon style="color: #fff" size="20">
              <Edit />
            </el-icon>&nbsp;
            <p style="color: #fff">查看公司</p>
          </div>
        </template>
        <div class="df aic jcsb">
          <p>公司基本信息</p>
          <div>
            <el-button v-if="newTableDate.auditStatus == 3" type="primary" link size="small"
              @click="contractFillingBtn">合同下载</el-button>
            <!-- <el-button v-if="newTableDate.auditStatus == 3" type="primary" link size="small"
              @click="downloadContract">下载合同</el-button> -->
            <el-button v-if="flag == false && roleList.write" type="primary" link size="small"
              @click="editCompany">修改公司信息</el-button>
          </div>
        </div>
        <el-divider />
        <el-descriptions class="margintop" :column="2" border>
          <el-descriptions-item>
            <template #label>
              <div class="cell-item">
                <span style="color: #f56c6c">*</span>
                公司名称
              </div>
            </template>
            <el-input v-if="flag == true" v-model="newTableDate.companyName" class="bor" style="width: 100%" @blur="
              /^(?!\s*$)[A-Za-z0-9._\-\(\)\u4e00-\u9fa5\（）\s-]+$/.test(
                newTableDate.companyName
              )
                ? (companyNameFlag = false)
                : (companyNameFlag = true)
              " />
            <p v-else>{{ newTableDate.companyName }}</p>
            <p v-if="companyNameFlag" style="font-size: 0.75rem; color: #f56c6c">
              请输入公司名称
            </p>
          </el-descriptions-item>
          <el-descriptions-item>
            <template #label>
              <div class="cell-item">
                <span style="color: #f56c6c">*</span>
                联系电话
              </div>
            </template>
            <el-input v-if="flag == true" v-model="newTableDate.phone" class="bor" style="width: 100%" @blur="
              /^[1][3,4,5,6,7,8,9][0-9]{9}$/.test(newTableDate.phone)
                ? (phoneFlag = false)
                : (phoneFlag = true)
              " />
            <p v-else>{{ newTableDate.phone }}</p>
            <p v-if="phoneFlag" style="font-size: 0.75rem; color: #f56c6c">
              请输入正确的手机号码
            </p>
          </el-descriptions-item>
          <el-descriptions-item>
            <template #label>
              <div class="cell-item">
                <span style="color: #f56c6c">*</span>
                公司地址
              </div>
            </template>
            <el-cascader v-if="flag == true" placeholder="选择住址" v-model="newTableDate.address" :options="options"
              filterable style="width: 100%" @change='blurAdress' />
            <p v-else>{{ newTableDate.address1 }}</p>
            <p v-if="addressFlag" style="font-size: 0.75rem; color: #f56c6c">
              请选择地址
            </p>
          </el-descriptions-item>
          <el-descriptions-item>
            <template #label>
              <div class="cell-item">
                <span style="color: #f56c6c">*</span>
                详细地址
              </div>
            </template>
            <el-input v-if="flag == true" v-model="newTableDate.detailAddress" class="bor" style="width: 100%" @blur="
              /^(?!\s*$)[A-Za-z0-9._\-\(\)\u4e00-\u9fa5\（）\s-]+$/.test(
                newTableDate.detailAddress
              )
                ? (detailAddressFlag = false)
                : (detailAddressFlag = true)
              " />
            <p v-else>{{ newTableDate.detailAddress }}</p>
            <p v-if="detailAddressFlag" style="font-size: 0.75rem; color: #f56c6c">
              请输入详细地址
            </p>
          </el-descriptions-item>
          <el-descriptions-item>
            <template #label>
              <div class="cell-item">
                <span style="color: #f56c6c">*</span>
                邮政编码
              </div>
            </template>
            <el-input v-if="flag == true" v-model="newTableDate.addressCode" class="bor" style="width: 100%" @blur="
              /^[1-9]\d{5}$/.test(
                newTableDate.addressCode
              )
                ? (addressCodeFlag = false)
                : (addressCodeFlag = true)
              " />
            <p v-else>{{ newTableDate.addressCode }}</p>
            <p v-if="addressCodeFlag" style="font-size: 0.75rem; color: #f56c6c">
              请输入正确的邮政编码
            </p>
          </el-descriptions-item>
          <el-descriptions-item>
            <template #label>
              <div class="cell-item">
                <span style="color: #f56c6c">*</span>
                主要负责人
              </div>
            </template>
            <el-input v-if="flag == true" v-model="newTableDate.principalName" class="bor" style="width: 100%" @blur="
              /^(([a-zA-Z+\.?\·?a-zA-Z+]{2,30}$)|([\u4e00-\u9fa5+\·?\u4e00-\u9fa5+]{2,30}$))/.test(
                newTableDate.principalName
              )
                ? (principalNameFlag = false)
                : (principalNameFlag = true)
              " />
            <p v-else>{{ newTableDate.principalName }}</p>
            <p v-if="principalNameFlag" style="font-size: 0.75rem; color: #f56c6c">
              请输入负责人姓名
            </p>
          </el-descriptions-item>
          <el-descriptions-item>
            <template #label>
              <div class="cell-item">
                <!-- <span style="color: #f56c6c">*</span> -->
                负责人电话
              </div>
            </template>
            <!-- <el-input v-if="flag == true" v-model="newTableDate.principalPhone" class="bor" style="width: 100%" @blur="
        /^[1][3,4,5,6,7,8,9][0-9]{9}$/.test(newTableDate.principalPhone)
          ? (principalPhoneFlag = false)
          : (principalPhoneFlag = true)
        " /> -->
            <p>{{ newTableDate.principalPhone }}</p>
            <!-- <p v-if="principalPhoneFlag" style="font-size: 0.75rem; color: #f56c6c">
              请输入正确的手机号码
            </p> -->
          </el-descriptions-item>
          <el-descriptions-item>
            <template #label>
              <div class="cell-item">
                <span style="color: #f56c6c">*</span>
                所属银行
              </div>
            </template>
            <el-input v-if="flag == true" v-model="bankName" class="bor" style="width: 100%" @blur="
              /^(?!\s*$)[A-Za-z0-9._\-\(\)\u4e00-\u9fa5\（）\s-]+$/.test(
                bankName
              )
                ? (bankNameFlag = false)
                : (bankNameFlag = true)
              " />
            <p v-else>{{ bankName }}</p>
            <p v-if="bankNameFlag" style="font-size: 0.75rem; color: #f56c6c">
              请输入银行名
            </p>
          </el-descriptions-item>
          <el-descriptions-item>
            <template #label>
              <div class="cell-item">
                <span style="color: #f56c6c">*</span>
                对公账户
              </div>
            </template>
            <el-input v-if="flag == true" v-model="accountNumber" class="bor" style="width: 100%" @blur="
              /^[0-9]*$/.test(accountNumber)
                ? (accountNumberFlag = false)
                : (accountNumberFlag = true)
              " />
            <p v-else>{{ accountNumber }}</p>
            <p v-if="accountNumberFlag" style="font-size: 0.75rem; color: #f56c6c">
              请输入正确的对公账户
            </p>
          </el-descriptions-item>
          <el-descriptions-item>
            <template #label>
              <div class="cell-item">
                <span style="color: #f56c6c">*</span>
                法人身份证
              </div>
            </template>
            <div v-if="flag == true">
              <el-upload action="#" list-type="picture-card" :auto-upload="false" :on-change="legalPersonIdCardPhp"
                v-model:file-list="legalPersonIdCardImg">
                <el-icon>
                  <Plus />
                </el-icon>
                <template #file="{ file }">
                  <div>
                    <img class="el-upload-list__item-thumbnail" :src="file.url" alt="" />
                    <span class="el-upload-list__item-actions">
                      <span class="el-upload-list__item-preview" @click="handlePictureCardPreview(file)">
                        <el-icon><zoom-in /></el-icon>
                      </span>
                      <span v-if="!disabled" class="el-upload-list__item-delete"
                        @click="legalPersonIdCardImghandleRemove(file)">
                        <el-icon>
                          <Delete />
                        </el-icon>
                      </span>
                    </span>
                  </div>
                </template>
              </el-upload>
              <div style="color: #f56c6c; font-size: 12px">
                注：需上传身份证正反面
              </div>
              <!-- <el-dialog v-model="EnlargePictureGs" align-center width="70%">
                                <div style="height:70vh;width: 100%;background-color: #fff;overflow-y: scroll;">
                                    <img style="width:100%" :src="dialogImageUrl" alt="">
                                </div>
                            </el-dialog> -->
            </div>
            <el-avatar v-else v-for="item in legalPersonIdCardImg" :key="item.id" shape="square" :size="60"
              :src="item.url" @click="seeImg(item.url)" />
          </el-descriptions-item>
          <el-descriptions-item>
            <template #label>
              <div class="cell-item">
                <span style="color: #f56c6c">*</span>
                法人身份证号
              </div>
            </template>
            <el-input v-if="flag == true" v-model="newTableDate.legalPersonId" class="bor" style="width: 100%" @blur="
              /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/.test(
                newTableDate.legalPersonId
              )
                ? (legalPersonIdFlag = false)
                : (legalPersonIdFlag = true)
              " />
            <p v-else>{{ newTableDate.legalPersonId }}</p>
            <p v-if="legalPersonIdFlag" style="font-size: 0.75rem; color: #f56c6c">
              请输入正确的身份证
            </p>
          </el-descriptions-item>
          <el-descriptions-item>
            <template #label>
              <div class="cell-item">
                <span style="color: #f56c6c">*</span>
                法人姓名
              </div>
            </template>
            <el-input v-if="flag == true" v-model="newTableDate.legalPersonName" class="bor" style="width: 100%" @blur="
              /^(([a-zA-Z+\.?\·?a-zA-Z+]{2,30}$)|([\u4e00-\u9fa5+\·?\u4e00-\u9fa5+]{2,30}$))/.test(
                newTableDate.legalPersonName
              )
                ? (legalPersonNameFlag = false)
                : (legalPersonNameFlag = true)
              " />
            <p v-else>{{ newTableDate.legalPersonName }}</p>
            <p v-if="legalPersonNameFlag" style="font-size: 0.75rem; color: #f56c6c">
              请输入法人姓名
            </p>
          </el-descriptions-item>
          <el-descriptions-item>
            <template #label>
              <div class="cell-item">
                <span style="color: #f56c6c">*</span>
                营业执照
              </div>
            </template>
            <div v-if="flag == true">
              <!-- ##################################### 营业执照照片 #####################################-->
              <el-upload action="#" list-type="picture-card" :auto-upload="false" :on-change="businessLicensePhp"
                v-model:file-list="businessLicenseImg">
                <el-icon>
                  <Plus />
                </el-icon>

                <template #file="{ file }">
                  <div>
                    <img class="el-upload-list__item-thumbnail" :src="file.url" alt="" />
                    <span class="el-upload-list__item-actions">
                      <span class="el-upload-list__item-preview" @click="handlePictureCardPreview(file)">
                        <el-icon><zoom-in /></el-icon>
                      </span>
                      <span v-if="!disabled" class="el-upload-list__item-delete"
                        @click="businessLicenseImghandleRemove(file)">
                        <el-icon>
                          <Delete />
                        </el-icon>
                      </span>
                    </span>
                  </div>
                </template>
              </el-upload>
              <!-- <el-dialog v-model="EnlargePictureGs" align-center width="70%">
                                <div style="height:70vh;width: 100%;background-color: #fff;overflow-y: scroll;">
                                    <img style="width:100%" :src="dialogImageUrl" alt="">
                                </div>
                            </el-dialog> -->
            </div>
            <el-avatar v-else v-for="item in businessLicenseImg" :key="item.id" shape="square" :size="60"
              :src="item.url" @click="seeImg(item.url)" />
          </el-descriptions-item>
          <el-descriptions-item>
            <template #label>
              <div class="cell-item">
                <span style="color: #f56c6c">*</span>
                营业执照号
              </div>
            </template>
            <el-input v-if="flag == true" v-model="newTableDate.certification" class="bor" style="width: 100%" @blur="
              /^(?!\s*$)[A-Za-z0-9._\-\(\)\u4e00-\u9fa5\（）\s-]+$/.test(
                newTableDate.certification
              )
                ? (certificationFlag = false)
                : (certificationFlag = true)
              " />
            <p v-else>{{ newTableDate.certification }}</p>
            <p v-if="certificationFlag" style="font-size: 0.75rem; color: #f56c6c">
              请输入营业执照号
            </p>
          </el-descriptions-item>
          <el-descriptions-item>
            <template #label>
              <div class="cell-item">
                <!-- <span style="color: #f56c6c">*</span> -->
                营业期限
              </div>
            </template>
            <el-date-picker v-if="flag == true" v-model="newTableDate.expirationDate" type="date" />
            <el-date-picker v-else v-model="newTableDate.expirationDate" type="date" disabled />
            <p v-if="expirationDateFlag" style="font-size: 0.75rem; color: #f56c6c">
              请选择营业期限
            </p>
          </el-descriptions-item>
          <el-descriptions-item>
            <template #label>
              <div class="cell-item">
                <span style="color: #f56c6c">*</span>
                资质证书
              </div>
            </template>
            <div v-if="flag == true">
              <!-- ##################################### 资质证书照片 #####################################-->
              <el-upload action="#" list-type="picture-card" :auto-upload="false" :on-change="certificationPhp"
                v-model:file-list="certificationImg">
                <!-- :on-remove="handleRemove" -->
                <el-icon>
                  <Plus />
                </el-icon>

                <template #file="{ file }">
                  <div>
                    <img class="el-upload-list__item-thumbnail" :src="file.url" alt="" />
                    <span class="el-upload-list__item-actions">
                      <span class="el-upload-list__item-preview" @click="handlePictureCardPreview(file)">
                        <el-icon><zoom-in /></el-icon>
                      </span>
                      <span v-if="!disabled" class="el-upload-list__item-delete"
                        @click="certificationImghandleRemove(file)">
                        <el-icon>
                          <Delete />
                        </el-icon>
                      </span>
                    </span>
                  </div>
                </template>
              </el-upload>
              <!-- <el-dialog v-model="EnlargePictureGs" align-center width="70%">
                                <div style="height:70vh;width: 100%;background-color: #fff;overflow-y: scroll;">
                                    <img style="width:100%" :src="dialogImageUrl" alt="">
                                </div>
                            </el-dialog> -->
            </div>
            <el-avatar v-else v-for="item in certificationImg" :key="item.id" shape="square" :size="60" :src="item.url"
              @click="seeImg(item.url)" />
          </el-descriptions-item>
          <el-descriptions-item>
            <template #label>
              <div class="cell-item">
                <span style="color: #f56c6c">*</span>
                公司照片
              </div>
            </template>
            <div v-if="flag == true">
              <!-- ##################################### 公司照片照片 #####################################-->
              <el-upload action="#" list-type="picture-card" :auto-upload="false" :on-change="companyImgsPhp"
                v-model:file-list="companyImgsImg">
                <el-icon>
                  <Plus />
                </el-icon>

                <template #file="{ file }">
                  <div>
                    <img class="el-upload-list__item-thumbnail" :src="file.url" alt="" />
                    <span class="el-upload-list__item-actions">
                      <span class="el-upload-list__item-preview" @click="handlePictureCardPreview(file)">
                        <el-icon><zoom-in /></el-icon>
                      </span>
                      <span v-if="!disabled" class="el-upload-list__item-delete"
                        @click="companyImgsImghandleRemove(file)">
                        <el-icon>
                          <Delete />
                        </el-icon>
                      </span>
                    </span>
                  </div>
                </template>
              </el-upload>
            </div>
            <el-avatar v-else v-for="item in companyImgsImg" :key="item.id" shape="square" :size="60" :src="item.url"
              @click="seeImg(item.url)" />
          </el-descriptions-item>
          <el-descriptions-item v-if="contractImg.length != 0">
            <template #label>
              <div class="cell-item">合同</div>
            </template>
            <el-avatar v-for="item in contractImg" :key="item.id" shape="square" :size="60" :src="item.url"
              @click="seeImg(item.url)" />
          </el-descriptions-item>
        </el-descriptions>

        <template #footer>
          <span class="dialog-footer">
            <el-button size="small" @click="centerDialogVisible = false">取消</el-button>
            <el-button size="small" v-if="flag == true" type="primary" @click="companySave" :loading="loading">
              确定
            </el-button>
          </span>
        </template>
      </el-dialog>
      <!-- ################################################ 蒙层添加公司 ################################################-->
      <el-dialog v-model="DialogVisible" align-center width="40%">
        <template #header>
          <div class="df aic">
            <el-icon style="color: #fff" size="20">
              <Edit />
            </el-icon>&nbsp;
            <p style="color: #fff">添加公司</p>
          </div>
        </template>
        <el-form ref="ruleFormRef" :rules="rules" :model="formData" label-width="120" class="df fdc aic"
          label-position="left">
          <el-form-item label="公司名称：" style="width: 60%" prop="companyName">
            <el-input v-model="formData.companyName" />
          </el-form-item>
          <el-form-item label="公司性质：" style="width: 60%">
            <el-select v-model="formData.type" placeholder="状态">
              <!-- 启用---N     停用---D -->
              <el-option label="拆解厂" value="0" />
              <el-option label="拖车" value="1" />
            </el-select>
          </el-form-item>
          <el-form-item label="所属组织：" style="width: 60%">
            <el-tree-select v-model="value" :data="dataTree" check-strictly :render-after-expand="false" />
          </el-form-item>
          <el-form-item label="负责人姓名：" style="width: 60%" prop="principalName">
            <el-input v-model="formData.principalName" />
          </el-form-item>
          <el-form-item label="负责人电话：" style="width: 60%" prop="principalPhone">
            <el-input v-model="formData.principalPhone" />
          </el-form-item>
        </el-form>
        <template #footer>
          <span class="dialog-footer">
            <el-button size="small" @click="DialogVisible = false">取消</el-button>
            <el-button size="small" type="primary" @click="confirm(ruleFormRef)" :loading="loading">确定</el-button>
          </span>
        </template>
      </el-dialog>
      <!-- ################################################ 激活 ################################################-->
      <el-dialog v-model="activateDialogVisible" align-center width="40%">
        <template #header>
          <div class="df aic">
            <el-icon style="color: #fff" size="20">
              <Edit />
            </el-icon>&nbsp;
            <p style="color: #fff">公司激活</p>
          </div>
        </template>
        <el-form :model="form" label-width="80" label-position="left" class="df fdc aic">
          <el-form-item label="激活码：" style="width: 60%">
            <el-input v-model="formData.activateCode" placeholder="激活码" />
          </el-form-item>
        </el-form>

        <template #footer>
          <span class="dialog-footer">
            <el-button size="small" @click="activateDialogVisible = false">取消</el-button>
            <el-button size="small" type="primary" v-if="timeValFlag == true"
              @click="getActivationCode">重新获取激活码</el-button>
            <el-button size="small" type="primary" v-if="timeValFlag == false">{{ timeVal }}s后重新获取</el-button>
            <el-button size="small" type="primary" @click="activateSave" :loading="loading">
              确定
            </el-button>
          </span>
        </template>
      </el-dialog>
      <!-- ################################################ 合同上传 ################################################-->
      <el-dialog v-model="uploadContractDialogVisible" align-center width="40%">
        <template #header>
          <div class="df aic">
            <el-icon style="color: #fff" size="20">
              <Edit />
            </el-icon>&nbsp;
            <p style="color: #fff">合同上传</p>
          </div>
        </template>
        <el-upload action="#" list-type="picture-card" :auto-upload="false" v-model:file-list="uploadContractImg"
          :on-change="changeFile" :limit="4">
          <el-icon>
            <Plus />
          </el-icon>
          <template #file="{ file }">
            <div>
              <img class="el-upload-list__item-thumbnail" :src="file.url" alt="" />
              <span class="el-upload-list__item-actions">
                <span class="el-upload-list__item-preview" @click="handlePictureCardPreview(file)">
                  <el-icon><zoom-in /></el-icon>
                </span>
                <span v-if="!disabled" class="el-upload-list__item-delete" @click="handleRemove1(file)">
                  <el-icon>
                    <Delete />
                  </el-icon>
                </span>
              </span>
            </div>
          </template>
        </el-upload>
        <template #footer>
          <span class="dialog-footer">
            <div class="df jcsb">
              <p style="font-size: 12px; color: red">&emsp;注：请上传图片</p>
              <div>
                <el-button size="small" @click="uploadContractDialogVisible = false">取消</el-button>
                <el-button size="small" type="primary" @click="uploadContractSave">
                  确定
                </el-button>
              </div>
            </div>
          </span>
        </template>
      </el-dialog>
      <!-- ################################################ 查看图片 ################################################-->
      <el-dialog v-model="prewivewImg" align-center width="70%">
        <div style="
            height: 70vh;
            width: 100%;
            background-color: #fff;
            overflow-y: scroll;
          ">
          <img style="width: 100%" :src="previewImgUrl" alt="" />
        </div>
      </el-dialog>
      <!-- ################################################ 合同下载 ################################################-->
      <el-dialog v-model="contractFillingFemonstration" align-center width="20%">
        <template #header>
          <div class="df aic">
            <el-icon style="color: #fff" size="20">
              <Edit />
            </el-icon>&nbsp;
            <p style="color: #fff">合同下载</p>
          </div>
        </template>
        <!-- <div class="df jcsa aic" v-for="item in contractFillingContentList" :key="item.id">
          <p style="line-height: 40px" class="df aic"><el-icon>
              <Document />
            </el-icon>&nbsp;{{ item.name }}</p>
          <div>
            <el-button type="primary" link @click="contractPreview(item.name)">预览</el-button>
            <el-divider direction="vertical" />
            <el-button type="primary" link @click="contractDownload(item.name)">下载</el-button>
          </div>
        </div> -->
        <div class="contractList df aic jcsb mb10" v-for="item in contractFillingContentList" :key="item.id">
          <div>
            <p style="font-weight: bold; user-select: none; margin-bottom: 6px">
              {{ item.name }}
            </p>
            <div style="font-size: 12px; cursor: pointer; user-select: none" @click="contractPreview(item.name)">
              点击预览
            </div>
          </div>
          <div class="df aic">
            <svg t="1718249670661" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
              p-id="6583" width="20" height="20">
              <path
                d="M825 921H185c-52.9 0-96-43.1-96-96V249c0-52.9 43.1-96 96-96 17.7 0 32 14.3 32 32s-14.3 32-32 32c-17.6 0-32 14.4-32 32v576c0 17.6 14.4 32 32 32h640c17.6 0 32-14.4 32-32V249c0-17.6-14.4-32-32-32-17.7 0-32-14.3-32-32s14.3-32 32-32c52.9 0 96 43.1 96 96v576c0 52.9-43.1 96-96 96z"
                fill="#2e5882" p-id="6584"></path>
              <path d="M505 665c-17.7 0-32-14.3-32-32V121c0-17.7 14.3-32 32-32s32 14.3 32 32v512c0 17.7-14.3 32-32 32z"
                fill="#2e5882" p-id="6585"></path>
              <path
                d="M505 729c-8.2 0-16.4-3.1-22.6-9.4l-192-192c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0L505 651.7l169.4-169.4c12.5-12.5 32.8-12.5 45.3 0s12.5 32.8 0 45.3l-192 192c-6.3 6.3-14.5 9.4-22.7 9.4z"
                fill="#2e5882" p-id="6586"></path>
            </svg>
            <el-button type="primary" link @click="contractDownload(item.name)">下载</el-button>
          </div>
        </div>
        <div style="height: 10px"></div>
        <!-- <div class="df" style="height: 100%">
          <img v-for="(item, index) in contractFillingArr" :key="index" style="width: 50%" @click="seeImg(item)"
            :src="item" alt="" />
        </div> -->
        <!-- <template #footer>
          <span class="dialog-footer">
            <el-button size="small" @click="contractFillingFemonstration = false">取消</el-button>
          </span>
        </template> -->
      </el-dialog>
      <el-dialog v-model="EnlargePictureGs" align-center width="70%">
        <div style="
            height: 70vh;
            width: 100%;
            background-color: #fff;
            overflow-y: scroll;
          ">
          <img style="width: 100%" :src="dialogImageUrl" alt="" />
        </div>
      </el-dialog>
      <!-- ################################################ 审核记录 ################################################-->
      <el-dialog v-model="AuditRecordDialogVisible" align-center width="40%">
        <template #header>
          <div class="df aic">
            <el-icon style="color: #fff" size="20">
              <Edit />
            </el-icon>&nbsp;
            <p style="color: #fff">审核历史记录</p>
          </div>
        </template>
        <el-table :data="auditRecordtableData" style="width: 100%" :header-cell-style="{ background: '#f0f6fe' }"
          max-height="450">
          <el-table-column label="审核编号" prop="id" />
          <el-table-column label="审核人" prop="审核人" />
          <el-table-column label="审核时间" prop="auditAt" />
          <el-table-column label="审核结果">
            <template #default="props">
              <el-tag type="warning" v-if="props.row.auditResult == 1">未通过</el-tag>
              <el-tag type="primary" v-else-if="props.row.auditResult == 0">通过</el-tag>
            </template>
          </el-table-column>
          <el-table-column label="拒绝原因" prop="rejectReason" />
        </el-table>
        <template #footer>
          <span class="dialog-footer">
            <el-button size="small" @click="AuditRecordDialogVisible = false">取消</el-button>
          </span>
        </template>
      </el-dialog>
      <!-- ################################################ 审核记录 ################################################-->
      <el-dialog v-model="trialHistoryDialogVisible" align-center width="40%">
        <template #header>
          <div class="df aic">
            <el-icon style="color: #fff" size="20">
              <Edit />
            </el-icon>&nbsp;
            <p style="color: #fff">历史记录</p>
          </div>
        </template>
        <el-table :data="trialHistoryTableData" style="width: 100%" :header-cell-style="{ background: '#f0f6fe' }"
          max-height="450">
          <el-table-column label="序号" prop="id" width="120" />
          <el-table-column label="基础设置" prop="levelName" />
          <el-table-column label="开始时间" prop="beginAt" />
          <el-table-column label="结束时间" prop="endAt" />
        </el-table>
        <template #footer>
          <span class="dialog-footer">
            <el-button size="small" @click="trialHistoryDialogVisible = false">取消</el-button>
          </span>
        </template>
      </el-dialog>
    </div>
  </div>
</template>

<script setup lang="ts">
import { Edit, ZoomIn, Document } from "@element-plus/icons-vue";
import { ElMessage } from "element-plus";
import { formatTime, formatTimeAll } from "../../../filters/index";
import {
  RequestCompaniesUploadContract,
  RequestAgreementGetAgreementUseLocation,
  RequestCompaniesGetActiveCode,
  RequestCompaniesSave,
  RequestCompaniesGetlistlimit,
  RequestEmployeeGetFunctionAuthorize,
  RequestCompanyImagesImgDel,
  RequestCompaniesCompanyActivateAudit,
  RequestCompaniesUpdate,
  RequestCompaniesSetCompanyFunctions,
  RequestCompaniesCompanyActivate,
  RequestcompaniesId,
  RequestnodegetNodeTree,
  RequestCompaniesGetRefuseReason,
  RequestTryLevelGetDetailByLevelName,
  RequestTryCompanyGetHistory,
} from "../../../api/path/index.js";
import { ref } from "vue";
import { regionData } from "element-china-area-data"; //获取地区
import { AutonaviApi } from "@/api/mapApi.js"; //引入封装的高德地图
import useAuthorize from "@/hooks/authorize";
let roleList = useAuthorize();
let options = regionData;
import { useRouter } from "vue-router";
const router = useRouter();
/*------------------------------------- 按钮权限 -------------------------------------*/
// const authorizeFlag = ref<any>();
const companyNameFlag = ref<any>(false);
const phoneFlag = ref<any>(false);
const addressFlag = ref<any>(false);
const detailAddressFlag = ref<any>(false);
const principalNameFlag = ref<any>(false);
const addressCodeFlag = ref<any>(false);
const principalPhoneFlag = ref<any>(false);
const bankNameFlag = ref<any>(false);
const accountNumberFlag = ref<any>(false);
const legalPersonIdFlag = ref<any>(false);
const legalPersonNameFlag = ref<any>(false);
const certificationFlag = ref<any>(false);
const expirationDateFlag = ref<any>(false);
/*------------------------------------- 按钮权限 -------------------------------------*/
const centerDialogVisible = ref(false);
const uploadContractDialogVisible = ref(false);
const activateDialogVisible = ref(false);
const contractFillingFemonstration = ref(false);
const AuditRecordDialogVisible = ref(false);
const prewivewImg = ref(false);
const DialogVisible = ref(false);
const EnlargePictureGs = ref(false);
const EnlargePictureZz = ref(false);
const EnlargePictureCard = ref(false);
const EnlargePictureYyZz = ref(false);
const flag = ref(false);
const bankName = ref<any>(null); //银行名
const accountNumber = ref<any>(null); //对公账户
const multipleSelection = ref<any>([]);
const loading = ref<any>(false); //按钮优化
const company = JSON.parse(localStorage.getItem("roleInfo")!).company;
const previewImgUrl = ref<any>("");
const seeImg = (e: any) => {
  prewivewImg.value = true;
  previewImgUrl.value = e;
};
const dialogImageUrl = ref("");
const handlePictureCardPreview = (file: any) => {
  dialogImageUrl.value = file.url!;
  EnlargePictureGs.value = true;
};
/* **************************************** 查询 *****************************************/
const searchData = ref<any>({
  auditStatus: "",
  status: "",
  companyName: "",
});
const searchDataBtn = () => {
  getData();
};
const resc = () => {
  searchData.value.auditStatus = "";
  searchData.value.status = "";
  searchData.value.companyName = "";
  currentPage.value = 1
  getData();
};
const form = ref({
  name: "",
  status: "",
  date: "",
});
/* 设置公司权限 */
const formData = ref<any>({
  companyName: "", //公司名
  parentId: "",
  phone: "",
  account_type: "",
  type: "0",
  legalPersonName: "",
  card: "", //联系电话
  status: "",
  address: "",
  briefIntroduction: "",
  principalPhone: "",
  principalName: "",
});
const value = ref<any>("");
let dataTree = ref<any>();
const handleSelectionChange = (val: any) => {
  multipleSelection.value = val;
};
let tableData = ref<any>([]);
const newTableDate = ref<any>("");
/* ******************** 查看公司信息 *********************/
const blurAdress = (e: any) => {
  console.log(e);
}
const check = (row: any) => {
  if (row.card) {
    bankName.value = JSON.parse(row.card.value).bankName;
    accountNumber.value = JSON.parse(row.card.value).accountNumber;
  }
  if (row.address != '') {
    console.log('地址地址', row.address);
    row.detailAddress = row.address.split(",")[3];
    row.address = [row.address.split(",")[0], row.address.split(",")[1], row.address.split(",")[2]]
    row.address1 = row.address.join()
  }
  newTableDate.value = row;
  console.log('row', row);
  row.imgs.forEach((val: any) => {
    if (val.type == 1) {
      // 法人身份证图片
      legalPersonIdCardImg.value.push({ url: val.url, id: val.id });
    } else if (val.type == 2) {
      // 营业执照图片
      businessLicenseImg.value.push({ url: val.url, id: val.id });
    } else if (val.type == 3) {
      // 资质证书图片
      certificationImg.value.push({ url: val.url, id: val.id });
    } else if (val.type == 4) {
      // 公司图片
      companyImgsImg.value.push({ url: val.url, id: val.id });
    } else if (val.type == 5) {
      // 合同图片
      contractImg.value.push({ url: val.url, id: val.id });
    }
  });
  centerDialogVisible.value = true;
};
/* ******************** 修改公司信息 *********************/
const editCompany = () => {
  flag.value = true;
  console.log("companyImgsImg.value ", companyImgsImg.value);
};
/* ******************** 蒙层关闭触发事件 *********************/
/* 请求添加公司----所属组织 */
const addCompany = () => {
  DialogVisible.value = true;
  RequestnodegetNodeTree().then((res: any) => {
    dataTree.value = JSON.parse(
      JSON.stringify(res.resultObj)
        .replace(/name/g, "label")
        .replace(/id/g, "value")
    );
  });
};
/* 请求公司列表信息 */
const dataSource = ref<any>([]);
const total = ref<any>(10);
const currentPage = ref<any>(1);
const pageSize = ref<any>(10);
const handleSizeChange = (val: number) => {
  getData();
};
const handleCurrentChange = (val: number) => {
  getData();
};
const companyImgsImg = ref<any>([]); //公司照片图片
const businessLicenseImg = ref<any>([]); //营业执照图片
const certificationImg = ref<any>([]); //资质证书图片
const legalPersonIdCardImg = ref<any>([]); //法人身份证图片
const contractImg = ref<any>([]); //合同
const getData = () => {
  /* 地址 */
  regionData.forEach((item) => {
    item.value! = item.label;
    item.children?.forEach((val) => {
      val.value! = val.label;
      val.children?.forEach((i) => {
        i.value! = i.label;
      });
    });
  });
  // let companyNode = JSON.parse(localStorage.getItem('roleInfo')!).company
  RequestCompaniesGetlistlimit({
    rows: pageSize.value,
    page: currentPage.value,
    auditStatus: searchData.value.auditStatus,
    status: searchData.value.status,
    companyName: searchData.value.companyName,
  }).then((res: any) => {
    console.log("res.resultObj.data--->", res.resultObj.data);
    // res.resultObj.data.forEach((item: any) => {
    //   // if (item.address != "") {
    //   //   item.detailAddress = item.address.split(",")[3];
    //   //   item.address = item.address.split(",")[0] + item.address.split(",")[1] + item.address.split(",")[2];
    //   // }
    //   item.updatedAt = formatTime(item.updatedAt);
    //   item.registAt = formatTime(item.registAt);
    // });
    console.log("res.resultObj.data===>", res.resultObj.data);
    tableData.value = res.resultObj.data;
    total.value = res.resultObj.total;
  });
  let treeData = ref<any>(
    localStorage
      .getItem("roleRoutes")
      ?.replace(/name/g, "label")
      .replace(/{ title: '/g, "")
      .replace(/' }/g, "")
  );
  dataSource.value = JSON.parse(treeData.value);
};
const closeDiag = () => {
  legalPersonIdCardPhpArr.value = [];
  companyImgsPhpArr.value = [];
  certificationPhpArr.value = [];
  businessLicensePhpArr.value = [];
  companyImgsImg.value = []; //公司照片图片
  businessLicenseImg.value = []; //营业执照图片
  certificationImg.value = []; //资质证书图片
  legalPersonIdCardImg.value = []; //法人身份证图片
  contractImg.value = []; //法人身份证图片
  bankName.value = null;
  accountNumber.value = null;
  flag.value = false;
  getData();
};
getData();
const ruleFormRef = ref<any>();
const rules = ref<any>({
  companyName: [{ required: true, message: "请填写公司姓名", trigger: "blur" }],
  principalName: [
    { required: true, message: "请填写负责人姓名", trigger: "blur" },
  ],
  principalPhone: [
    { required: true, message: "请填写负责人手机号", trigger: "blur" },
    {
      pattern: /^1[3456789]\d{9}$/,
      message: "请输入正确的手机号码",
      trigger: "blur",
    },
  ],
});
/* 添加公司 */
const confirm = async (formEl: any | undefined) => {
  if (!formEl) return;
  await formEl.validate((valid: any, fields: any) => {
    if (valid) {
      loading.value = true;
      RequestCompaniesSave({
        companyName: formData.value.companyName,
        principalName: formData.value.principalName,
        principalPhone: formData.value.principalPhone,
        address: formData.value.address,
        type: formData.value.type,
        businessLicense: formData.value.businessLicense,
      }).then((res: any) => {
        if (res.code == 0) {
          DialogVisible.value = false;
          loading.value = false;
          ElMessage.success(res.msg);
          //其它处理代码
          getData();
        } else {
          ElMessage.error(res.msg);
          loading.value = false;
        }
      });
    } else {
      console.log("error submit!", fields);
    }
  });
};
/* 删除 */
const del = (id: any) => {
  RequestcompaniesId(id).then((res: any) => {
    getData();
    ElMessage.success(res.msg);
  });
};
/* ******************** 保存修改后的公司信息 *********************/
import { Delete, Plus } from "@element-plus/icons-vue";
// const dialogImageUrl = ref('')
const disabled = ref(false);
/* ##############  图片 ##############*/
// 法人身份证删除
const legalPersonIdCardImghandleRemove = (uploadFile: any) => {
  if (uploadFile.id != undefined) {
    RequestCompanyImagesImgDel(uploadFile.id).then((res: any) => {
      if (res.code == 0) {
        legalPersonIdCardImg.value = legalPersonIdCardImg.value.filter(
          (item: any) => {
            return item.id !== uploadFile.id;
          }
        );
        ElMessage.success(res.msg);
        getData();
      }
    });
  } else {
    legalPersonIdCardImg.value = legalPersonIdCardImg.value.filter(
      (item: any) => item.uid !== uploadFile.raw.uid
    );
    legalPersonIdCardPhpArr.value = legalPersonIdCardPhpArr.value.filter(
      (item: any) => item.uid !== uploadFile.raw.uid
    );
  }
};
// 营业执照删除
const businessLicenseImghandleRemove = (uploadFile: any) => {
  if (uploadFile.id != undefined) {
    RequestCompanyImagesImgDel(uploadFile.id).then((res: any) => {
      if (res.code == 0) {
        businessLicenseImg.value = businessLicenseImg.value.filter(
          (item: any) => {
            return item.id !== uploadFile.id;
          }
        );
        ElMessage.success(res.msg);
        getData();
      }
    });
  } else {
    businessLicenseImg.value = businessLicenseImg.value.filter(
      (item: any) => item.uid !== uploadFile.raw.uid
    );
    businessLicensePhpArr.value = businessLicensePhpArr.value.filter(
      (item: any) => item.uid !== uploadFile.raw.uid
    );
  }
};
// 资质证书删除
const certificationImghandleRemove = (uploadFile: any) => {
  if (uploadFile.id != undefined) {
    RequestCompanyImagesImgDel(uploadFile.id).then((res: any) => {
      if (res.code == 0) {
        certificationImg.value = certificationImg.value.filter((item: any) => {
          return item.id !== uploadFile.id;
        });
        ElMessage.success(res.msg);
        getData();
      }
    });
  } else {
    certificationImg.value = certificationImg.value.filter(
      (item: any) => item.uid !== uploadFile.raw.uid
    );
    certificationPhpArr.value = certificationPhpArr.value.filter(
      (item: any) => item.uid !== uploadFile.raw.uid
    );
  }
};
// 公司照片删除
const companyImgsImghandleRemove = (uploadFile: any) => {
  if (uploadFile.id != undefined) {
    RequestCompanyImagesImgDel(uploadFile.id).then((res: any) => {
      if (res.code == 0) {
        companyImgsImg.value = companyImgsImg.value.filter((item: any) => {
          return item.id !== uploadFile.id;
        });
        ElMessage.success(res.msg);
        getData();
      }
    });
  } else {
    companyImgsImg.value = companyImgsImg.value.filter(
      (item: any) => item.uid !== uploadFile.raw.uid
    );
    companyImgsPhpArr.value = companyImgsPhpArr.value.filter(
      (item: any) => item.uid !== uploadFile.raw.uid
    );
  }
};
/* ********** 公司照片 ***********/
const companyImgsPhpArr = ref<any>([]);
const companyImgsPhp = (file: any) => {
  companyImgsPhpArr.value.push(file);
};
/* ********** 资质证书 ***********/
const certificationPhpArr = ref<any>([]);
const certificationPhp = (file: any) => {
  certificationPhpArr.value.push(file);
};
/* ********** 营业执照 ***********/
const businessLicensePhpArr = ref<any>([]);
const businessLicensePhp = (file: any) => {
  console.log("asfsada", file);
  businessLicensePhpArr.value.push(file);
};
/* ********** 法人身份证 ***********/
const legalPersonIdCardPhpArr = ref<any>([]);
const legalPersonIdCardPhp = (file: any) => {
  legalPersonIdCardPhpArr.value.push(file);
};
// const detailAddressFlag = ref<any>(false)
// const companyNameFlag = ref<any>(false)
// const phoneFlag = ref<any>(false)
// const addressFlag = ref<any>(false)
// const principalNameFlag = ref<any>(false)
// const principalPhoneFlag = ref<any>(false)
// const bankNameFlag = ref<any>(false)
// const accountNumberFlag = ref<any>(false)
// const legalPersonIdFlag = ref<any>(false)
// const legalPersonNameFlag = ref<any>(false)
// const certificationFlag = ref<any>(false)
// const expirationDateFlag = ref<any>(false)
const companySave = async () => {
  console.log(companyImgsPhpArr.value);
  if (
    newTableDate.value.detailAddress &&
    newTableDate.value.companyName &&
    newTableDate.value.phone &&
    newTableDate.value.address &&
    newTableDate.value.principalName &&
    bankName.value &&
    accountNumber.value &&
    newTableDate.value.legalPersonName &&
    newTableDate.value.certification &&
    // newTableDate.value.expirationDate &&
    companyImgsImg.value.length != 0 &&
    certificationImg.value.length != 0 &&
    legalPersonIdCardImg.value.length != 0 &&
    businessLicenseImg.value.length != 0
  ) {
    if (
      phoneFlag.value == false &&
      companyNameFlag.value == false &&
      addressFlag.value == false &&
      detailAddressFlag.value == false &&
      principalNameFlag.value == false &&
      addressCodeFlag.value == false &&
      bankNameFlag.value == false &&
      accountNumberFlag.value == false &&
      legalPersonIdFlag.value == false &&
      legalPersonNameFlag.value == false &&
      certificationFlag.value == false
      // expirationDateFlag.value == false
    ) {
      console.log("对了");
      loading.value = true;
      if (newTableDate.value.address) {
        let res = await AutonaviApi(
          newTableDate.value.address + newTableDate.value.detailAddress
        );
        newTableDate.value.longitudeAndLatitude = res.data.geocodes[0].location;
      }
      let cardBank = {
        bankName: bankName.value,
        accountNumber: accountNumber.value,
      };
      const blob = new Blob(
        [
          JSON.stringify({
            id: newTableDate.value.id,
            companyName: newTableDate.value.companyName,
            phone: newTableDate.value.phone,
            principalName: newTableDate.value.principalName,
            principalPhone: newTableDate.value.principalPhone,
            legalPersonName: newTableDate.value.legalPersonName,
            legalPersonId: newTableDate.value.legalPersonId,
            businessLicense: newTableDate.value.businessLicense,
            // status: newTableDate.value.status,
            certification: newTableDate.value.certification,
            card: JSON.stringify(cardBank),
            expirationDate: newTableDate.value.expirationDate,
            addressCode: newTableDate.value.addressCode,
            address:
              newTableDate.value.address +
              "," +
              newTableDate.value.detailAddress,
            longitudeAndLatitude: newTableDate.value.longitudeAndLatitude,
          }),
        ],
        {
          type: "application/json;charset=utf-8",
        }
      );
      const newTableDataForm = new FormData();
      newTableDataForm.append("company", blob);
      companyImgsPhpArr.value.forEach((item: any) => {
        newTableDataForm.append("companyImgs", item.raw);
      });
      certificationPhpArr.value.forEach((item: any) => {
        newTableDataForm.append("certification", item.raw);
      });
      businessLicensePhpArr.value.forEach((item: any) => {
        newTableDataForm.append("businessLicense", item.raw);
      });
      legalPersonIdCardPhpArr.value.forEach((item: any) => {
        newTableDataForm.append("legalPersonIdCard", item.raw);
      });
      RequestCompaniesUpdate(newTableDataForm).then((res: any) => {
        if (res.code == 0) {
          ElMessage.success(res.msg);
          flag.value = false;
          centerDialogVisible.value = false;
          loading.value = false;
          getData();
        } else {
          ElMessage.error(res.msg);
        }
      });
    } else {
      ElMessage.error("请确认上传资料是否正确");
    }
  } else {
    ElMessage.error("请填写完整资料");
  }
};
/* ******************** 公司审核 *********************/
const SubmitReview = (row: any) => {
  // SubmitForm.value = row
  console.log(row);
  let cardBank = {
    bankName: bankName.value,
    accountNumber: accountNumber.value,
  };
  RequestCompaniesCompanyActivateAudit({
    id: row.id,
    address: row.address,
    companyName: row.companyName,
    principalName: row.principalName,
    principalPhone: row.principalPhone,
    rejectReason: row.rejectReason,
    longitudeAndLatitude: row.longitudeAndLatitude,
    legalPersonId: row.legalPersonId,
    legalPersonName: row.legalPersonName,
    businessLicense: row.certification,
    certification: row.certification,
    phone: row.phone,
    card: JSON.stringify(cardBank),
  }).then((res: any) => {
    if (res.code == 0) {
      ElMessage.success(res.msg);
      //其它处理代码
      getData();
    } else {
      ElMessage.error(res.msg);
    }
  });
};
const getActivationCodeFlag = ref<any>(false);
const timeValFlag = ref<any>(true);
const timeVal = ref<any>(60);
/* ******************** 获取公司激活码 *********************/
const getActivationCode = () => {
  let timer = setInterval(() => {
    if (timeVal.value > 0) {
      timeValFlag.value = false;
      timeVal.value--;
    } else {
      timeValFlag.value = true;
      clearInterval(timer);
    }
  }, 1000);
  RequestCompaniesGetActiveCode(activateData.value.id).then((res: any) => {
    if (res.success == true) {
      ElMessage.success("激活码已发送至负责人手机短信，请注意查收！！！");
    } else {
      ElMessage.error(res.msg + "，请联系客服");
      timeValFlag.value = true;
      clearInterval(timer);
    }
  });
};

/* ******************** 公司激活 *********************/
const activateData = ref<any>({});
const activate = (row: any) => {
  activateDialogVisible.value = true;
  activateData.value = row;
};
const activateSave = () => {
  loading.value = true;
  activateData.value.activateCode = formData.value.activateCode;
  let cardBank = {
    bankName: bankName.value,
    accountNumber: accountNumber.value,
  };
  RequestCompaniesCompanyActivate({
    id: activateData.value.id,
    address: activateData.value.address,
    companyName: activateData.value.companyName,
    principalName: activateData.value.principalName,
    principalPhone: activateData.value.principalPhone,
    rejectReason: activateData.value.rejectReason,
    longitudeAndLatitude: activateData.value.longitudeAndLatitude,
    legalPersonId: activateData.value.legalPersonId,
    legalPersonName: activateData.value.legalPersonName,
    businessLicense: activateData.value.businessLicense,
    certification: activateData.value.certification,
    phone: activateData.value.phone,
    card: JSON.stringify(cardBank),
    activateCode: formData.value.activateCode,
  }).then((res: any) => {
    if (res.success == true) {
      ElMessage.success("激活成功，即将跳转至登录页");
      activateDialogVisible.value = false;
      loading.value = false;
      //其它处理代码
      setTimeout(() => {
        window.location.href = "/erpLogin";
      }, 500);
      getData();
    } else {
      loading.value = false;
      ElMessage.error(res.msg);
    }
  });
};
/* ******************** 公司上传合同 *********************/
const uploadContractImg = ref<any>([]);
const changeFile = (file: any) => {
  uploadContractImg.value.push(file);
};
const handleRemove1 = (file: any) => {
  uploadContractImg.value = uploadContractImg.value.filter(
    (val: any) => val.name !== file.raw.name
  );
};
const uploadRow = ref<any>();
const uploadContract = (row: any) => {
  uploadRow.value = row;
  console.log(row);
  uploadContractDialogVisible.value = true;
};
const uploadContractSave = () => {
  let formDataNew = new FormData();
  uploadContractImg.value.forEach((item: any) => {
    formDataNew.append("contract", item.raw);
  });
  formDataNew.append("companyNode", uploadRow.value.node);
  RequestCompaniesUploadContract(formDataNew).then((res: any) => {
    console.log(res);
    if (res.success == true) {
      ElMessage.success(res.resultObj);
      uploadContractDialogVisible.value = false;
      getData();
    }
  });
};
/* ******************** 下载合同 *********************/
const downloadContract = () => {
  RequestAgreementGetAgreementUseLocation("erp合同").then((res: any) => {
    if (res.success == true) {
      res.resultObj.forEach((item: any) => {
        const link = document.createElement("a");
        link.href = item;
        link.click();
      });
      ElMessage.success("下载成功");
    }
  });
};
/* ******************** 合同下载 *********************/
const contractFillingContentList = ref<any>([
  {
    id: 1,
    name: "商城合同",
  },
  {
    id: 2,
    name: "收车合同",
  },
  {
    id: 3,
    name: "erp合同",
  },
]);
const contractFillingBtn = () => {
  contractFillingFemonstration.value = true;
};

/* ******************** 合同预览 *********************/
const contractPreview = (e: any) => {
  RequestAgreementGetAgreementUseLocation(e).then((res: any) => {
    if (res.success == true) {
      const routerResolve = router.resolve(
        `/PDF_preview?file=` + res.resultObj[0]
      );
      window.open(routerResolve.href, "_blank");
    }
  });
};
/* ******************** 合同下载 *********************/
const contractDownload = (e: any) => {
  RequestAgreementGetAgreementUseLocation(e).then((res: any) => {
    if (res.success == true) {
      const link = document.createElement("a");
      link.href = res.resultObj[0];
      link.click();
    }
  });
};
/* ******************** 审核记录 *********************/
const auditRecordtableData = ref<any>([]);
const auditRecord = (row: any) => {
  console.log(row);
  RequestCompaniesGetRefuseReason(row.id).then((res: any) => {
    if (res.success == true) {
      AuditRecordDialogVisible.value = true;
      console.log(res);
      res.resultObj.forEach((item: any) => {
        item.auditAt = formatTimeAll(item.auditAt);
      });
      auditRecordtableData.value = res.resultObj;
    } else {
      ElMessage.error(res.msg);
    }
  });
};
/* ******************** 试用等级 *********************/
const showPopoverData = ref<any>();
const showPopoverFlag = ref(false);
const showPopover = (e: any) => {
  RequestTryLevelGetDetailByLevelName(e).then((res: any) => {
    console.log(res.resultObj.fittingNumOnSale);
    console.log(res.resultObj.wholeCarNumOnSale);
    if (res.success == true) {
      if (res.resultObj.fittingNumOnSale == undefined || res.resultObj.fittingNumOnSale == null) {
        res.resultObj.fittingNumOnSale = 0
      }
      if (res.resultObj.wholeCarNumOnSale == undefined || res.resultObj.wholeCarNumOnSale == null) {
        res.resultObj.wholeCarNumOnSale = 0
      }
      showPopoverData.value = res.resultObj;
      setTimeout(() => {
        showPopoverFlag.value = true;
      }, 200);
    }
  });
};
/* ******************** 试用历史记录 *********************/
const trialHistoryDialogVisible = ref<any>(false);
const trialHistoryTableData = ref<any>([]);
const trialHistoryBtn = (e: any) => {
  RequestTryCompanyGetHistory(e.node).then((res: any) => {
    if (res.success == true) {
      console.log(res.resultObj);
      trialHistoryTableData.value = res.resultObj;
      trialHistoryDialogVisible.value = true;
    }
  });
};
</script>

<style scoped lang="scss">
/* 弹出框样式 */
::v-deep .el-dialog__header {
  background-color: #116cf8;
  margin-right: 0;

  .el-icon svg {
    color: #dcdfe6;
  }
}

::v-deep .el-dialog__title {
  color: #fff;
}

.main {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;

  .main_nav {
    border-radius: 6px;
    background-color: #fff;

    .el-form-item {
      margin-bottom: 0;
    }
  }

  .main_content {
    background-color: #fff;
  }
}

.el-descriptions {
  margin-top: 1.25rem;
}

.cell-item {
  display: flex;
  align-items: center;
}

.margintop {
  margin-top: 1.25rem;
}

.avatar-uploader .el-upload {
  border: 0.0625rem dashed var(--el-border-color);
  border-radius: 0.375rem;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
  border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
  font-size: 1.75rem;
  color: #8c939d;
  width: 5.625rem;
  height: 5.625rem;
  border: 0.0625rem solid #ccc;
  text-align: center;
  border-radius: 0.5rem;
}

.custom-tree-node {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.875rem;
  padding-right: 0.5rem;
}

::v-deep .el-upload--picture-card {
  --el-upload-picture-card-size: 3.75rem;
}

::v-deep .el-upload {
  .el-icon svg {
    color: #dcdfe6;
  }
}

::v-deep .el-upload-list--picture-card .el-upload-list__item-thumbnail {
  width: 3.75rem;
  height: 3.75rem;
  -o-object-fit: contain;
  object-fit: contain;
}

::v-deep .el-upload-list--picture-card .el-upload-list__item {
  width: 3.75rem;
  height: 3.75rem;
}

::v-deep .el-upload-list--picture-card .el-upload-list__item-actions {
  width: 3.75rem;
  height: 3.75rem;
}

::v-deep .el-select {
  width: 100% !important;
}

.contractList {
  width: 100%;
  background-color: #f9f9f9;
  padding: 10px 15px;
  border-radius: 10px;
}

.cyr-flex-box {
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
}
</style>
